<section *ngIf="todoService.todoList.length > 0" class="main">
  <input #toggleAll id="toggle-all" class="toggle-all" type="checkbox"
         [(ngModel)]="todoService.allCompleted"
         (change)="toggleAllComplete(toggleAll.checked)">
  <label for="toggle-all">Mark all as complete</label>
  <ul class="todo-list">
    <!-- These are here just to show the structure of the list items -->
    <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
    <li *ngFor="let todo of todoService.todoList | todoFilter:status"
        [ngClass]="{
          completed: todo.completed,
          editing: todo.editing
        }">
      <div class="view">
        <input #toggleOne class="toggle" type="checkbox"
               [(ngModel)]="todo.completed"
               (change)="toggleComplete(toggleOne.checked, todo)">
        <label (dblclick)="todo.editing=true">{{ todo.content }}</label>
        <button class="destroy" (click)="deleteTodo(todo)"></button>
      </div>
      <input *ngIf="todo.editing"
             #editingInput
             class="edit" type="text" appAutofocus
             [ngModel]="todo.content"
             (blur)="stopEditing(todo, editingInput.value)"
             (keyup.enter)="stopEditing(todo, editingInput.value)"
             (keyup.escape)="cancelEditing(todo)">
    </li>
  </ul>
</section>
<!-- This footer should be hidden by default and shown when there are todos -->
<footer *ngIf="todoService.todoList.length > 0" class="footer">
  <!-- This should be `0 items left` by default -->
  <span class="todo-count">
    <strong>{{ todoService.uncompletedCount }}</strong> {{ todoService.uncompletedCount === 1 ? 'item' : 'items' }} left
  </span>
  <!-- Remove this if you don't implement routing -->
  <ul class="filters">
    <li>
      <a [ngClass]="{ selected: status === '' }" routerLink="/">All</a>
    </li>
    <li>
      <a [ngClass]="{ selected: status === 'active' }" routerLink="/active">Active</a>
    </li>
    <li>
      <a [ngClass]="{ selected: status === 'completed' }" routerLink="/completed">Completed</a>
    </li>
  </ul>
  <!-- Hidden if no completed items are left ↓ -->
  <button *ngIf="todoService.uncompletedCount !== todoService.todoList.length"
          (click)="clearCompletedTodos()"
          class="clear-completed">
    Clear completed
  </button>
</footer>
